//饼状图
function pieChart(pie) {
    let myChart = echarts.init($('.pie')[0]);
    let option = {
        //表头
        title: {
            text: '籍贯 Hometown',
            //表头样式
            textStyle: {
                color: ' #6d767e'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}人 占比{d}%'
        },
        series: [{
            name: '各地学员分布',
            type: 'pie',
            radius: ['10%', '65%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 4
            },
            data: pie
        }]
    };
    myChart.setOption(option);
};
// pieChart();
//折线图
function lineChart(name, salary, trueSalary) {
    let myChart = echarts.init($('.line')[0]);
    let option = {
        legend: {
            top: 20,
        },
        tooltip: {
            trigger: 'axis',
            position: function(pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e'
            }

        },
        xAxis: {
            boundaryGap: false,
            type: 'category',
            symbol: 'none',
            data: name
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '10%']
        },
        dataZoom: [{
            style: 'slider',
            start: 0,
            end: 15
        }],
        series: [{
                name: '期望薪资',
                type: 'line',
                smooth: true,
                symbol: 'none',
                // areaStyle: {},
                data: salary
            },
            {
                name: '实际薪资',
                type: 'line',
                color: 'red',
                smooth: true,
                symbol: 'none',
                // areaStyle: {},
                data: trueSalary
            }
        ]
    };
    myChart.setOption(option);
};
// lineChart();
//柱状图
function barChart(avgScore, group, lt60, gt60, gt80) {
    //avgScore是平均分,group是x轴刻度,lt60是低于60分人数,gt60是60-80分人数,gt80是80分以上人数
    //注意盒子不要找错
    let myChart = echarts.init($('.barChart')[0]);
    let option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            left: '7%',
            right: '7%',
            top: 30,
            bottom: 30,
        },
        legend: {
            // data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [{
            type: 'category',
            data: group,
            // axisPointer: {
            //     type: 'shadow'
            // }
        }],
        yAxis: [{
                type: 'value',
                // name: '成绩',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                // name: 'Temperature',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [{
                name: '平均分',
                type: 'bar',
                barWidth: 15,
                data: avgScore
            },
            {
                name: '低于60分人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,
                data: lt60
            },
            {
                name: '60到80分人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,
                data: gt60
            },
            {
                name: '80分以上人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,
                data: gt80
            }
        ]
    };
    myChart.setOption(option);
}
// barChart();


//地图部分
function mapChart(chinaGeoCoordMap, chinaDatas) {
    let myChart = echarts.init($('.map')[0]);
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [
        ['北京市', chinaDatas]
    ].forEach(function(item, i) {
        series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    // symbol: 'image://http://www.itcbc.com:3006/formdata/laoduan.jpg', //箭头图标,可以是图片的超链接
                    symbol: 'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z', //箭头图标,可以是图片的超链接
                    symbolSize: 25, //图标大小
                },
                lineStyle: {

                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: .3 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function(params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 13
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function(val) {
                    return 5 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function(dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [15, 0],
                        color: '#0f0', //被攻击点  北京的字体颜色
                        formatter: '{b}',
                        textStyle: {
                            color: "#0f0"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60"
                    }
                },
                symbol: 'pin',
                symbolSize: 10,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线',
            textStyle: {
                color: '#6d767e'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function(params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        backgroundColor: "#fff",
        //视觉映射组件
        visualMap: { //图例值控制
            show: false,
            min: 0,
            max: 1,
            calculable: true,
            // show: true,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: '#ccc', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(255, 0, 0, .5)' //悬浮背景
                }
            }
        },
        series: series
    };
    myChart.setOption(option);
}
// mapChart();

//-----------------------------------------------------------
// 开发功能

//发送ajsx请求,获取班级概况
axios({
    method: 'get',
    url: '/student/overview',
}).then(function({ data: res }) {
    // console.log(res.data);
    $('.total').text(res.data.total)
    $('.avgAge').text(res.data.avgAge)
    $('.avgSalary').text(res.data.avgSalary)
    $('.proportion').text(res.data.proportion)
})

//柱状图的效果
//1.点击三个点切换下拉菜单
$('.bar .btn').on('click', function() {
    $('#batch').toggle();
})


//点击第几次成绩获取对应的成绩
$('#batch li').on('click', function() {
    axios({
        method: 'GET',
        url: '/score/batch',
        params: {
            batch: $(this).index() + 1
        }
    }).then(function({ data: res }) {
        // console.log(res);
        if (res.code == 0) {
            barChart(res.data.avgScore, res.data.group, res.data.lt60, res.data.gt60, res.data.gt80);

        }

    })
})

//页面一打开就自动点击第一个li
$('#batch li').eq(0).trigger('click')


//获取全部学员信息,提供给折线图\饼图\地图
axios({
    method: 'get',
    url: '/student/list',
}).then(function(res) {
    // console.log(res)
    let { code, data } = res.data;
    if (code === 0) {
        //获取数据成功!!
        // console.log(data);
        //折线图需要的数据
        //将data里的name放在name数组中
        let name = [];
        //将data里的期望薪资放在salary数组中
        let salary = [];
        // 将data里的实际薪资放在trueSalary
        let trueSalary = [];

        //饼图所需数据
        //省份    //每个省有多少人
        let pie = []; //格式[{name:'河北省',value:3},{name:'河北省',value:3}]


        //地图需要的数距
        //省份,和省份的人数,省份的人数用pie即可
        let chinaGeoCoordMap = {};
        chinaGeoCoordMap['北京市'] = [116.4551, 40.2539];
        let chinaDatas = [];
        data.forEach(function(item, index) {
            // 拿到name
            name.push(item.name);
            // 拿到期望薪资salaey
            salary.push(item.salary);
            // 拿到实际薪资tureSalary
            trueSalary.push(item.truesalary);


            //按格式提取省份及每个省多少人
            if (pie.some(v => v.name === item.province)) {
                // pie里有某个省
                // 让该省对应的value加1
                let index = pie.findIndex(v => v.name === item.province);
                pie[index].value++;
            } else {
                // pie中没有某个省份
                // 在pie中加一个name将新的省放进去
                pie.push({ name: item.province, value: 1 })
            }
            // pie.push({ name: item.province, value: 1 })


            //提取地图所需数据
            chinaGeoCoordMap[item.province] = [item.jing, item.wei]
            if (chinaDatas.some(v => v[0].name === item.province)) {
                // chinaDatas里有某个省
                // 让该省对应的value加1
                let index = chinaDatas.findIndex(v => v[0].name === item.province);
                chinaDatas[index][0].value++;
            } else {
                // pie中没有某个省份
                // 在pie中加一个name将新的省放进去
                chinaDatas.push([{ name: item.province, value: 1 }])
            }
        });
        // console.log(chinaGeoCoordMap);
        // console.log(chinaDatas);
        // console.log(pie.length);
        lineChart(name, salary, trueSalary);
        pieChart(pie);
        mapChart(chinaGeoCoordMap, chinaDatas);
    }
});